<template>
  <div id="lineChart" ref="lineChart"></div>
</template>

<script lang="js" setup>
import {ref,onMounted,getCurrentInstance,onUnmounted,markRaw,watch} from 'vue';
const {proxy} = getCurrentInstance()
const echarts = proxy.echarts
const props = defineProps(['chartData','YchartData','title'])

const myChart = ref()
//监听数据变化
const XdataList = ref()
const series = ref()
const legend = ref()

watch(props, (newProps) => {

myChart.value.showLoading()

  XdataList.value = newProps.chartData.info_date;
  series.value= newProps.YchartData;
  legend.value= newProps.chartData.model_list;
  setData()
}), { immediate: true }


onMounted(() => {
  window.addEventListener("resize", function () {
    myChart.value.resize();
  });

  myChart.value = markRaw(echarts.init(proxy.$refs['lineChart']))
  myChart.value.showLoading()

})

const setData =()=>{
  // 加载动画
  myChart.value.setOption({
  title: {
    text: props.title,
    textStyle: {
      color: '#001529',
      fontSize: 20
    }

  },
  tooltip: {
    trigger: 'axis',
    textStyle: {
      color: '#001529',
    }
  },
  legend: {
    data: legend.value,
    textStyle: {
      color: '#001529',
      fontSize: 15
    }
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  toolbox: {
    feature: {
      saveAsImage: {show: true, title: '点击下载图片'}
    }
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: XdataList.value,
    axisLabel: {
      textStyle: {
        color: '#001529',
        fontSize: 10
      }
    }
  },
  yAxis: {
    type: 'value',
    axisLabel: {
      textStyle: {
        color: '#001529',
        fontSize: 10
      }
    }
  },
  series: series.value

  },true)
myChart.value.hideLoading()
}

onUnmounted(() => {
  myChart.value.dispose()
  window.removeEventListener('resize',myChart.value)
})
</script>

<style scoped lang="less">
#lineChart {
  width: 100%;
  height: 100%;
}
</style>
